<!-- Copyright 2021 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<style include="cr-shared-style">

#mainMenu,
#mainMenuButtons {
  margin: auto;
  text-align: start;
  width: 800px;
}

#mainMenuButtons {
  background: #FFF;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
  font-size: 22px;
}

h1 {
  font-family: 'Google Sans', 'Roboto';
  font-size: 32px;
  font-weight: medium;
  line-height: 40px;
  margin-bottom: 32px;
}

cr-link-row {
  font-family: 'Roboto';
  font-weight: medium;
}

</style>

<div id="mainMenu"
    hidden$="[[ shouldHideMainMenu(activeScreen) ]]">
  <h1 id="mainMenuHeader" tabindex="-1" aria-describedby="mainMenuHeaderHint">
    [[ getMsg(header_) ]]
  </h1>
  <div id="mainMenuHeaderHint" hidden>[[ getMsg(headerDescription_) ]]</div>
  <div id="mainMenuButtons">
    <template id="mainMenuButtonTemplate" is="dom-repeat"
        items="[[ buttonData_ ]]" as="data">
      <cr-link-row class="hr" on-click="onButtonClicked_"
          label="[[ getMsg(data.title) ]]"
          hidden$="[[ shouldHideButton_(data.medium, medium) ]]">
      </cr-link-row>
    </template>
  </div>
</div>
